class Banner {
	// 页面修改那些元素的属性,往往这些元素都要被当做参数传入
	constructor(newDiv, newLis) {
		console.log(newDiv, newLis)
		this.index = 0;
		// 改背景
		this.oDiv = newDiv;
		// 改颜色
		this.oLis = newLis;
		this.oDiv.style.backgroundImage = "url(image/" + this.index + ".jpg)";
		this.oLis[this.index].style.backgroundColor = "red";
	}

	// 设置div背景
	setDivBgcImage() {
		this.oDiv.style.backgroundImage = "url(image/" + this.index + ".jpg)";
	}

	// 设置li的颜色
	setOlisColor() {
		for (let i = 0; i < this.oLis.length; i++) {
			if (i == this.index) {
				this.oLis[i].style.backgroundColor = "red";
			} else {
				this.oLis[i].style.backgroundColor = "#e7e7e7";
			}
		}
	}

	next() {
		this.index++;

		if (this.index == this.oLis.length) {
			this.index = 0;
		}

		this.setDivBgcImage();
		this.setOlisColor();
	}

	prev() {
		this.index--;

		if (this.index == -1) {
			this.index = this.oLis.length - 1;
		}

		this.setDivBgcImage();
		this.setOlisColor();
	}

	eventBindLi() {
		let that = this;
		for (let i = 0; i < this.oLis.length; i++) {
			this.oLis[i].onclick = function() {
				that.index = i;
				that.setDivBgcImage();
				that.setOlisColor();
			}
		}
	}

	eventBind() {
		let oBtnNext = document.getElementById("btn-next");
		let oBtnPrev = document.getElementById("btn-previous");
		let that = this;

		oBtnNext.onclick = function() {
			that.next();
		}

		oBtnPrev.onclick = function() {
			that.prev();
		}
	}
}

let oDiv = document.querySelector("#oImg");
let oLis = document.getElementById("oLi");
console.log(oDiv, oLis)
let b = new Banner(oDiv, oLis);
b.eventBind();
b.eventBindLi();
